<template>
<div>
  <div class="chartbox1">
    <div class='echart-brand'>
      <div id='out-in-brand-charts' style='width:96%;height:96%'></div>
    </div>
  </div>
</div>
</template>

<script>
export default {
    name:"outInBrand",
    props:['compareOutAndIn'],
    watch:{
      compareOutAndIn(){
        this.renderCharts(this.compareOutAndIn);
      }
    },
    methods:{
      renderCharts(data){
         const brandCharts = this.$echarts.init(document.getElementById('out-in-brand-charts'));
         const option = {
            title:{
              text:'出入库品牌对比TOP5 (单位/辆)',
              textStyle: {
                color: '#00dcde',
                // fontWeight: 'lighter',
                fontSize: 16,
              },
              left: 10,
              top: 10
            },
            legend:{
              show:true,
              right:10,
              top:12,
              data: ['入库', '出库'],
              textStyle:{
                color:'#fff'
              }
            },
            grid:{
                left:'15%',
                top:'15%',
                bottom:'10%'
            },
            yAxis:[{
              type: 'category',
               data:this.dealData(data,'brandName'),
               axisTick : {show: false},
               axisLabel:{
                    color:"#fff",
                    fontSize:'13'
               }
            },{
              type: 'category',
              data:this.dealData(data,'brandName'),
              axisLabel:{show:false},
              axisLine: {show:false},
              axisTick: {show:false},
              splitArea: {show:false},
              splitLine: {show:false},
            }],
            xAxis:{
               axisLabel:{
                     color:"#fff",
                     fontSize:'14'
               },
              splitLine:{
                lineStyle:{
                  color:['rgba(255,255,255,0.2)']
                }
              }
            },
            series:[{
               name:"入库",
               type:"bar",
               barWidth:'25',
               yAxisIndex:1,
               barGap:'0%',
               barCategoryGap:'50%',
               data:this.dealData(data,'storageNum'),
               label:{
                 show:true,
                 position:'right',
                 fontSize:12,
                 color:'#fff',
                 // formatter: '{c}辆'
               },
               itemStyle:{
                    color:'#088beb'
               }
            },{
              name:"出库",
              type:"bar",
              barWidth:'25',
              barGap:'0%',
              barCategoryGap:'50%',
              data:this.dealData(data,'carOutStorageNum'),
              label:{
                show:true,
                position:'insideRight',
                fontSize:12,
                color:'#fff',
                // formatter: '{c}辆'
              },
              itemStyle:{
                color:'#0EC49E'
              }
            }]
         };
         brandCharts.setOption(option)
      },
      dealData(data,name){
        var arr = [];
        for(var i=0;i<data.length;i++){
          arr.push(data[i][name])
        }
        return arr
      }
    }
}
</script>

